@import (reference) "less-nameset";
/* ---------- dividedbox ---------- */
.wi-dividedbox{
    width: 100%; height: 100%;
    overflow: hidden;
    position: relative;
    background: @dividedbox-title-border-c;
}
.wi-hdividedbox.wi-dividedbox-resizing { cursor: col-resize; }
.wi-vdividedbox.wi-dividedbox-resizing { cursor: row-resize; }
/* 非 resizing 时不显示followbar */
.wi-dividedbox-followbar {
    background-color: @followbar-color;
    position: absolute;
    z-index: 1; // 比 wi-dividedbox-group 大
}
.wi-hdividedbox > .wi-dividedbox-followbar {
    top: 0; bottom: 0;
    width: @dividedbox-barSize; }
.wi-vdividedbox > .wi-dividedbox-followbar {
    left: 0; right: 0;
    height: @dividedbox-barSize; }
:not(.wi-dividedbox-resizing) > .wi-dividedbox-followbar { display: none; }
/* ---------- dividedbox-group ---------- */
.wi-dividedbox-group {
    background: @bg;
    position: relative;
    overflow: hidden;
    z-index: 0; // 比 wi-dividedbox-followbar 小
}
.wi-dividedbox-group:last-child{/* 防止浏览器尺寸计算误差导致溢出，最后一个使用绝对定位 */
    position: absolute; right: 0; bottom: 0;
}
.wi-hdividedbox-group { float: left; height: 100%; }
/* h: 最后一列无 resizebar，其他列需留白 */
.wi-hdividedbox-group:not(:last-child) { padding-right: @dividedbox-barSize;}
.wi-vdividedbox-group { float: none; width: 100%; }
/* v: 最后一行无 resizebar，其他行需留白 */
.wi-vdividedbox-group:not(:last-child) { padding-bottom: @dividedbox-barSize; }
.wi-dividedbox-collapsing {// 动画时，js 中添加到 wi-dividedbox-group 上
    transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
}

.wi-dividedbox-bar {
    background: @dividedbox-title-bg;
    border: @dividedbox-line;
    position: absolute; right: 0; bottom: 0;
}
.wi-dividedbox-group:last-child > .wi-dividedbox-bar{ display: none; } /* 最后一个 box 无 resizebar */
.wi-hdividedbox-group > .wi-dividedbox-bar {
    width: @dividedbox-barSize; top: 0;
    cursor: col-resize; border-style: none solid; /* 只有左右边框 */ }
.wi-vdividedbox-group > .wi-dividedbox-bar {
    height: @dividedbox-barSize; left: 0;
    cursor: row-resize; border-style: solid none; /* 只有上下边框 */ }

.wi-dividedbox-head {
    .dividedbox-coll-style();
    color:@title-color;
    border-bottom: @dividedbox-line;
    height: @dividedbox-head-h;
    position: relative; width: 100%;
}
.wi-dividedbox-group:not(.wi-dividedbox-showhead) > .wi-dividedbox-head { display: none; }
.wi-dividedbox-colled { height: 100%; border-bottom: none;}

span.wi-dividedbox-title{
    display: inline-block;
    vertical-align: middle;
    margin-left: @dividedbox-headmargin;
    margin-right: @dividedbox-headmargin;
    @xx: 3 * @dividedbox-headmargin + @dividedbox-iconSize;
    width: calc(~"100% - @{xx}");
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
img.wi-dividedbox-icon{
    line-height: inherit;
    vertical-align: middle;
    width: @dividedbox-iconSize;
    height: @dividedbox-iconSize;
}
.wi-hdividedbox-group > .wi-dividedbox-colled > .wi-dividedbox-icon,
.wi-hdividedbox-group > .wi-dividedbox-colled > .wi-dividedbox-title{ display: none;}
.wi-dividedbox-collctrl-left,
.wi-dividedbox-collctrl-right,
.wi-dividedbox-collctrl-up,
.wi-dividedbox-collctrl-down{
    display: block;
    cursor: pointer;
    position: absolute; right: @dividedbox-headmargin; top: 4px;
    width: @dividedbox-iconSize;
    height: @dividedbox-iconSize;
    background-image: url("images/dividedbox/collctrl.gif");
}
.wi-dividedbox-colled > .wi-dividedbox-collctrl-right,
.wi-dividedbox-collctrl-left{
    background-position: 0 0;
}
.wi-dividedbox-colled > .wi-dividedbox-collctrl-left,
.wi-dividedbox-collctrl-right{
    background-position: 0 -15px;
}
.wi-dividedbox-colled > .wi-dividedbox-collctrl-down,
.wi-dividedbox-collctrl-up{
    background-position: -15px -15px;
}
.wi-dividedbox-colled > .wi-dividedbox-collctrl-up,
.wi-dividedbox-collctrl-down{
    background-position: -15px 0;
}
.wi-dividedbox-collctrl-left:hover,
.wi-dividedbox-collctrl-right:hover,
.wi-dividedbox-collctrl-up:hover,
.wi-dividedbox-collctrl-down:hover{
    background-color: @dividedbox-ctrl-bg;
}

.wi-dividedbox-cont { width: 100%; height: 100%; overflow: auto; }
/* 可以折叠的内容框留白：collapse 高度 */
.wi-dividedbox-showhead > .wi-dividedbox-cont { height: calc(~"100% - @{dividedbox-head-h}"); }

:not(.wi-dividedbox-resizable) > .wi-dividedbox-group > .wi-dividedbox-bar { cursor: auto; }